{% extends "admin_site.html" %}
{% load i18n static iclock_tags compress %}

{% block center %}
  <div id="id_app_content" class="layui-fluid">
    {% csrf_token %}
    <div class="layui-row layui-col-space15" style="top: 30px">
      <div class="layui-col-md1"></div>
      <div class="layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-body">
            <div id="chartPresent" class="" style="height: 135px"></div>
          </div>
        </div>
      </div>
      <div class="layui-col-md7">
        <div class="layui-card">
          <div class="layui-card-body">
            <div id="chartCompare" class="" style="height: 135px"></div>
          </div>
        </div>
      </div>
      <div class="layui-col-md1"></div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md1"></div>
      <div class="layui-col-md10">
        <div class="layui-card">
          <div class="layui-card-body real-time">
            <div class="layui-row">
              <div class="layui-col-md6">
                <div class="layui-card">
                  <div class="layui-card-body">
                    <div id="dashboard-table" style="overflow-x:hidden;overflow-y: auto;">
                      <table class="dashboard-table" style="width: 100%">
                        <thead></thead>
                        <tbody></tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-card-body">
                  <div id="areaCapacity" style="height: 135px"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md1"></div>
    </div>
    <div id="obj_tooltip"></div>
    {% if update_password %}
    <div id="idUpdatePwd" style="display: none;">
      <form id="idUpdatePwdForm" action="" class="layui-form" lay-filter="updatePwdForm" style="">
        {% csrf_token %}
        <div style="text-align: center;font-size: 18px;color:#7ac143;padding: 10px;">
          <span>{% trans 'passwordChange.titles.passwordChange' %}</span>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline field-old_password">
            <label for="" class="layui-form-label">
              {% trans 'user.fields.password' %}<span class="required">*</span></label>
            <div class="layui-input-inline">
              <input type="password" name="old_pwd" class="layui-input">
            </div>
          </div>
          <div class="layui-inline field-new_password">
            <label for="" class="layui-form-label">
              {% trans 'user.fields.newPassword' %}<span class="required">*</span></label>
            <div class="layui-input-inline">
              <input type="password" name="new_pwd" class="layui-input">
            </div>
          </div>
          <div class="layui-inline field-confirm_password">
            <label for="" class="layui-form-label">
              {% trans 'user.fields.confirmPassword' %}<span class="required">*</span></label>
            <div class="layui-input-inline">
              <input type="password" name="confirm_pwd" class="layui-input">
            </div>
          </div>
        </div>
      </form>
    </div>
    {% endif %}
  </div>
{% endblock %}
{% block extension_js %}
  {{  block.super }}
  {% compress js file dashboard_js %}
    <script src="{% static "js/echarts.min.js" %}"></script>
    <script src="{% static 'js/dashboard.js' %}?v=1.1"></script>
  {% endcompress %}
  {% if update_password %}
    <script>
      layui.use(['layer'], function() {
        layer.open({
          type: 1
          , title: '<img src="/media/images/abroad_att/license-zk-logo.png" style="height:22px;">'
          , shadeClose: false
          , closeBtn: 0
          , content: $("#idUpdatePwd")
          //, area: ['420px', '220px']
          , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
          , yes: function (index, layero) {
              var layerIndex = layer.load();
              $.ajax({
                url: '/base/password_change/'
                , type: "POST"
                , data: $(layero).find("#idUpdatePwdForm").serialize()
                , dataType: 'json'
                , success: function (response, status, xhr) {
                  layer.close(layerIndex);
                  if(response.ret === 0){
                    layer.msg(gettext('action_notification_successful'), {icon: 6});
                    setTimeout(function () {
                      window.location.href = "{% url 'biotime:logout' %}";
                    }, 3000)
                  }else{
                    layer.msg(response.message, {icon: 5});
                  }
                }
                , error: function () {
                  layer.close(layerIndex);
                  layer.msg("Server Error", {icon: 5});
                }
              });
          }
          , btn2: function (index, layero) {
            window.location.href = "{% url 'biotime:logout' %}";
          }
        });
      });
    </script>
  {% endif %}
{% endblock %}